<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-input v-model="query.name" placeholder="用户名模糊查询" class="handle-input mr10"></el-input> -->
                <el-button type="success" @click="add()">添加</el-button>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-table
                        :data="tableData"
                        style="width: 100%; margin-bottom: 20px"
                        row-key="pTitle"
                        border
                        ref="permissionTreeTable"
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    >
                        <!-- <el-table-column prop="pId" label="Id" sortable width="180"> </el-table-column> -->
                        <el-table-column prop="pTitle" label="权限名称" sortable width="180"> </el-table-column>
                        <el-table-column prop="pAction" label="权限标识符" width="180"> </el-table-column>
                        <el-table-column prop="pApiUrl" label="URL路径" width="180"></el-table-column>
                        <el-table-column prop="iconName" label="Icon名称" width="180"></el-table-column>
                        <el-table-column prop="isMenu" label="是否显示菜单" width="150">
                            <template slot-scope="scope">
                                <span>{{scope.row.isMenu==1?'是':'否'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sortNo" label="排序号" width="100"></el-table-column>
                        <el-table-column label="操作" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit"  @click="edit(scope.row.pId)">编辑
                                </el-button>
                                <el-button type="danger" icon="el-icon-delete"  @click="del(scope.row.pId)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="权限的添加" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="addForm">
                <el-form-item label="权限名" :label-width="formLabelWidth" prop="pTitle">
                    <el-input v-model="form.pTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级权限" :label-width="formLabelWidth" prop="parentId">
                    <treeselect v-model="form.parentId" 
                        placeholder="请选择上级权限"
                        :multiple="false" 
                        :options="permissionTreeOptions" 
                        :clearable="true" 
                        :open-on-click="true"
                        :normalizer="normalizer"/>
                </el-form-item>
                <el-form-item label="权限标识符" :label-width="formLabelWidth" prop="pAction">
                    <el-input v-model="form.pAction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="URL路径" :label-width="formLabelWidth" prop="pApiUrl">
                    <el-input v-model="form.pApiUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Icon名称" :label-width="formLabelWidth" prop="iconName">
                    <el-input v-model="form.iconName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序号" :label-width="formLabelWidth" prop="sortNo">
                    <el-input v-model="form.sortNo" autocomplete="off" placeholder="越大优显示先级越高"></el-input>
                </el-form-item>
                <el-form-item label="是否菜单" :label-width="formLabelWidth" prop="isMenu">
                    <el-switch v-model="form.isMenu"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPermissionSubmit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="权限的编辑" :visible.sync="updatedialogFormVisible">
            <el-form :model="form" :rules="rules" ref="editForm">
                <el-form-item label="权限名" :label-width="formLabelWidth" prop="pTitle">
                    <el-input v-model="form.pTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级权限" :label-width="formLabelWidth" prop="parentId">
                    <treeselect v-model="form.parentId" 
                        placeholder="请选择上级权限"
                        :multiple="false" 
                        :options="permissionTreeOptions" 
                        :clearable="true" 
                        :open-on-click="true"
                        :normalizer="normalizer"/>
                </el-form-item>
                <el-form-item label="权限标识符" :label-width="formLabelWidth" prop="pAction">
                    <el-input v-model="form.pAction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="URL路径" :label-width="formLabelWidth" prop="pApiUrl">
                    <el-input v-model="form.pApiUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Icon名称" :label-width="formLabelWidth" prop="iconName">
                    <el-input v-model="form.iconName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序号" :label-width="formLabelWidth" prop="sortNo">
                    <el-input v-model="form.sortNo" autocomplete="off" placeholder="越大优显示先级越高"></el-input>
                </el-form-item>
                <el-form-item label="是否菜单" :label-width="formLabelWidth" prop="isMenu">
                    <el-switch v-model="form.isMenu"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatedialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePermissionSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getPermissionTree,addPermission,deletePermission,updatePermission,getPermission} from '@/api/power';
// 导入树形选择组件
import Treeselect from '@riophae/vue-treeselect'
// 导入树形选择组件样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name: 'power',
    components: { Treeselect },
    data() {
        return {
            tableData: [],   //权限列表数据
            defaultProps: {
                children: 'children',
                label: 'pTitle'
            },    
            defaultformValue: {
                pId: 0,
                pTitle: "",
                pAction: "",
                parentId: null,
                pApiUrl: null,
                isMenu: true,
                iconName: "",
                sortNo: 0
            },

            form: {
                pTitle: "",
                pAction: "",
                parentId: 0,
                pApiUrl: null,
                isMenu: true,
                iconName: "",
                sortNo: 0
            },
            //添加权限对话框
            dialogFormVisible: false,
            //修改权限对话框
            updatedialogFormVisible: false,
            //对话框宽度
            formLabelWidth: '120px',
            //验证规则
            rules: {
                pTitle: [
                    { required: true, message: '请输入权限名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2到 50 个字符', trigger: 'blur' }
                ],
                pAction: [
                    { required: true, message: '请输入URL地址', trigger: 'blur' }
                ],
                parentId: [
                    { required: true, message: '请选择上级权限', trigger: 'change' }
                ]
            },

            permissionTreeOptions:[] //属性下拉选项
        };
    },
    methods: {
        //权限的显示
        show() {
            getPermissionTree().then(res => {
                // console.log(res.data)
                this.tableData = res.data;
            });
        },
        add() {
            this.form = Object.assign({}, this.defaultformValue)  //将表单对象初始化清空
            this.permissionTreeOptions=[{pId:0, pTitle:'根节点', children: this.tableData}];
            this.dialogFormVisible = true;
        },
        //权限的添加
        addPermissionSubmit() {
            this.$refs["addForm"].validate((valid) => {
            if (valid) {
                addPermission(this.form).then(res => {
                    if (res.code == 200) {
                        this.$message({message: '权限添加成功', type: 'success'});
                        this.form = Object.assign({}, this.defaultformValue)  //将表单对象初始化清空
                        this.dialogFormVisible = false;
                        this.show();
                    }
                    else {
                        this.$message({ message: '权限添加失败', type: 'warning'});
                        this.dialogFormVisible = false;
                    }
                })
            } else {
                console.log('数据验证失败！！');
                return false;
            }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //删除
        del(id){
            if (confirm('是否确认删除？')) {
                deletePermission(id).then(res => {
                    console.log("角色删除:", res.code);
                    if (res.code > 0) {
                        this.$message({
                            message: '角色删除成功',
                            type: 'success'
                        });
                        this.show();
                    }
                    else {
                        this.$message({
                            message: '角色删除失败',
                            type: 'warning'
                        });
                    }
                })
            }
        },
        //权限编辑
        edit(id){
            this.permissionTreeOptions=[{pId:0, pTitle:'根节点', children: this.tableData}];

            //返填权限信息
            getPermission(id).then((res)=>{
                this.form = res.data;
                this.updatedialogFormVisible=true;
            })
        },
        //权限的编辑
        updatePermissionSubmit() {
            this.$refs["editForm"].validate((valid) => {
                if (valid) {
                    //先验证，后修改权限
                    updatePermission(this.form).then(res => {
                        if (res.code == 200) {
                            this.$message({message: '权限修改成功',type: 'success'});
                            this.form = Object.assign({}, this.defaultformValue)  //将表单对象初始化清空
                            this.updatedialogFormVisible = false;
                            this.show();
                        }
                        else {
                            this.$message({message: '权限修改失败',type: 'warning'});
                            this.updatedialogFormVisible = false;
                        }
                    })
                } else {

                }
            });
        },
        //属性格式转换
        normalizer(node) {
            return {
                id: node.pId,
                label: node.pTitle,
                children: node.children,
        }
    },
    },
    mounted() {
        this.show();
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>